﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="BS.Web._default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" rel="Stylesheet" href="style/main.css" />
    <style type="text/css">
        .container{font-family:宋体,Arial;font-size:14px;width:1000px;margin:0px auto 0px auto;border:solid 1px #CCC;}
        .line{border-top:1px dashed #CCC;height:1px;overflow:hidden;margin:5px 0px;}
        ul{list-style:none;margin:0px;padding:0px;}

        .top{}
        .menu{float:right;height:60px;line-height:60px;width:500px;}
        .menu li{float:right;font-size:25px;font-weight:bold;color:#AAA;margin:0px 5px;}
        .menu .l1 a{text-decoration:none;color:#F4A431;}
        .menu .l2 a{text-decoration:none;color:#1880C0;}
        .menu .l3 a{text-decoration:none;color:#549241;}
        
        .top2{font-size:14px;}
        .search{float:left;width:630px;height:120px;background-color:#E9EEF2;}
        .search .combo{background-color:White;width:328px;float:right;}
        .search .combo ul{list-style:none;margin:0px;padding:0px;}
        .search .combo li{float:left;height:24px;line-height:24px;border-top:1px solid #CCC; border-bottom:1px solid #CCC;}
        .search .combo li.box{background-image:url('image/arrow_down.png');background-repeat:no-repeat;background-position:42px -3px;width:70px;cursor:pointer;}
        .search .combo li.box_selected{background-image:url('image/arrow_up.png');}
        .search .combo li .class{width:50px;height:15px;line-height:15px;margin-top:5px;padding-left:8px;border-left:1px solid #CCC;font-size:12px;}
        
        .search .combo li.text{border-left:1px solid #CCC;}
        .search .combo li.text input{width:200px;border:none;height:22px;padding-left:3px;padding-right:3px;}
        .search .combo li.button input{width:50px;border:none;height:24px;text-align:center;cursor:pointer;background-color:#FFF;border-left:1px solid #CCC;border-right:1px solid #CCC;}
        
        .search .combo-menu{border:1px solid #CCC;border-top:none;position:absolute;top:0px;left:0px;font-size:12px;background-color:#FFF;}
        .search .combo-menu ul{list-style:none;margin:0px;padding:0px;}
        .search .combo-menu li{padding:4px 8px;cursor:pointer;}
        .search .combo-menu li:hover{background-color:#3399FF;color:#FFF;}
        
        .login{float:right;width:360px;height:100px;padding-top:20px;background-color:#E9EEF2;}
        .login .item{height:30px;line-height:30px;vertical-align:middle;padding-left:25px;}
        .login .item input{width:200px;padding:3px 2px;margin-right:3px;font-size:12px;border:1px solid #CCC;}
        .login .item label{width:60px;float:left;font-family:Arial;}
        .login .item a{font-size:12px;color:#336699;text-decoration:none;}
        .login .item a:hover{ text-decoration:underline;}
        .login .item1{height:40px;line-height:40px;vertical-align:middle;padding-left:85px;}
        .login .item1 label{font-size:12px;color:#444;}
        .login .item1 .submit{height:30px;line-height:25px;width:80px;margin-left:10px;}
        
        .body{margin:10px 0px 0px 0px;}
        .body .table-list{float:left;border:1px solid #CCC;border-left:none;width:630px;}
        .body .table-list .header{}
        .body .table-list .header ul{border:none;margin:0px;padding:0px;width:200px;float:right;}
        .body .table-list .header li{border:1px solid #E9EEF2;background:none;border-bottom:none;border-right:none;text-align:center;height:50px;line-height:50px;overflow:hidden;font-size:12px;white-space: nowrap;text-overflow: ellipsis;}
        .body .table-list .header li.first {border-top:none;}
        .body .table-list .header li.selected{background-color:#E9EEF2;}
        .body .table-list .header li a{font-size:12px;color:#336699;text-decoration:none;}
        .body .table-list .header li a:hover{text-decoration:underline;}
        .body .table-list .content{float:left;width:410px;height:183px;}
        
        .body .table-list2{float:left;border:1px solid #CCC;border-left:none;width:630px;margin-top:20px;}
        .body .table-list2 .header ul{background-color:#E9EEF2;border-bottom:1px solid #CCC;margin:0px;padding:0px;}
        .body .table-list2 .header li{float:left;text-align:center;font-size:12px;border:1px solid #E9EEF2;border-bottom:none;height:20px;line-height:20px;margin:5px auto auto auto;padding:0px 10px;cursor:pointer;}
        .body .table-list2 .header li.selected{background-color:#FFF;border:1px solid #CCC;border-bottom:none;}
        .body .table-list2 .content{width:630px;height:200px;}
        
        .body .rank{float:right;width:360px;border:1px solid #CCC;}
        
        .bottom{font-size:12px;text-align:center;margin:5px auto;}
    </style>
    <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="script/jquery.corner.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.table-list').find('#tab1_2, #tab1_3, #tab1_4,').hide();
            $('.table-list').find('#li_tab1_1').addClass('selected');
            $('.table-list .header').find('li').hover(function () {
                $('.table-list .header').find('li').removeClass('selected');
                $('.table-list').find('#tab1_1, #tab1_2, #tab1_3, #tab1_4,').hide();
                $('#' + this.id.replace('li_', '')).show();
                $(this).addClass('selected');
            });

            $('.table-list2').find('#tab2_2, #tab2_3, #tab2_4,').hide();
            $('.table-list2').find('#li_tab2_1').addClass('selected');
            $('.table-list2 .header').find('li').click(function () {
                $('.table-list2 .header').find('li').removeClass('selected');
                $('.table-list2').find('#tab2_1, #tab2_2, #tab2_3, #tab2_4,').hide();
                $('#' + this.id.replace('li_', '')).show();
                $(this).addClass('selected');
            });

            $('.combo-menu').hide();
            $('*').click(function (e) {
                if ($('.combo .box').is(this)) {
                    if ($('.combo-menu').is(':visible')) {
                        $('.combo-menu').slideUp('fast');
                        $('.combo .box').removeClass('box_selected');
                    } else {
                        $('.combo-menu').width(70)
                                    .css('left', $(this).position().left + $(this).width() - $('.combo-menu').width() + 'px')
                                    .css('top', $('.combo').position().top + $('.combo').height() + 'px')
                                    .slideDown('fast');
                        $('.combo .box').addClass('box_selected');
                    }
                    $(this).focus();
                    e.stopPropagation();
                } else if ($('.combo-menu li').is(this)) {
                    $('.combo .class').text($(this).text());
                    $('.combo-menu').slideUp('fast');
                    $('.combo .box').removeClass('box_selected');
                    e.stopPropagation();
                } else if ($('.combo-menu').is(':visible')) {
                    $('.combo-menu').slideUp('fast');
                    $('.combo .box').removeClass('box_selected');
                    e.stopPropagation();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <div class="top">
            <div class="logo"></div>
            <div class="menu">
                <ul>
                    <li class="l1"><a href="#">工具</a></li>
                    <li>/</li>
                    <li class="l2"><a href="#">设计</a></li>
                    <li>/</li>
                    <li class="l3"><a href="#">语言</a></li>
                </ul>
            </div>
            <div class="clean"></div>
        </div>
        <div class="top2">
            <div class="search">
                <div class="combo">
                    <ul>
                        <li class="text"><input type="text" /></li>
                        <li class="box"><div class="class">书名</div></li>
                        <li class="button"><input type="submit" value="搜索" /></li>
                    </ul>
                    <div class="clean"></div>
                </div>
                <div class="combo-menu">
                    <ul>
                        <li>书名</li>
                        <li>作者</li>
                        <li>ISBN</li>
                        <li>出版社</li>
                    </ul>
                </div>
            </div>
            <div class="login">
                <div class="item">
                    <label for="username">Email：</label>
                    <input type="text" id="username" />
                </div>
                <div class="item">
                    <label for="password">密&nbsp;&nbsp;码：</label>
                    <input type="password" id="password" />
                    <a href="#">忘记密码</a>
                </div>
                <div class="item1">
                    <input type="checkbox" id="remember" style="vertical-align:middle;" /><label for="remember">记住我</label>
                    <input type="submit" class="submit" value="登录"/>
                </div>
            </div>
            <div class="clean"></div>
        </div>
        <div class="body">
            <div class="table-list">
                <div class="header">
                    <ul>
                        <li id="li_tab1_1" class="first"><a href="#">《深入浅出MFC》</a></li>
                        <li id="li_tab1_2"><a href="#">《C#高级编程》</a></li>
                        <li id="li_tab1_3"><a href="#">《C#入门经典》</a></li>
                        <li id="li_tab1_4"><a href="#">《C++入门经典》</a></li>
                    </ul>
                </div>
                <div class="content">
                    <div id="tab1_1">tab1</div>
                    <div id="tab1_2">tab2</div>
                    <div id="tab1_3">tab3</div>
                    <div id="tab1_4">tab4</div>
                </div>
                <div class="clean"></div>
            </div>
            <div class="rank">
            </div>
            <div class="table-list2">
                <div class="header">
                    <ul>
                        <li id="li_tab2_1" class="first">C</li>
                        <li id="li_tab2_2">C++</li>
                        <li id="li_tab2_3">Javascript</li>
                        <li id="li_tab2_4">Html</li>
                        <div class="clean"></div>
                    </ul>
                    <div class="clean"></div>
                </div>
                <div class="content">
                    <div id="tab2_1">tab1</div>
                    <div id="tab2_2">tab2</div>
                    <div id="tab2_3">tab3</div>
                    <div id="tab2_4">tab4</div>
                </div>
                <div class="clean"></div>
            </div>
            <div class="clean"></div>
        </div>
        <div class="bottom">
            Copyright© 2001 - 2011 All Rights Reserved <a href="mailto:caizhifei2003@163.com">caizhifei2003@163.com</a>
        </div>
    </div>
    </form>
</body>
</html>